<script setup lang="ts">
    import { onMounted } from 'vue';
    import { useThemeStore } from '@/stores/theme';
    // import $ from 'jquery';

    const themeStore = useThemeStore();
    
    /**
     * 返回顶部
     */
    const backTop = () => {
        $('body,html').animate({
            scrollTop: 0
        },
        500);
    }

    /**
     * 返回底部
     */
     const backBottom = () => {
        $('body,html').animate({
            scrollTop: $(document).height()
        },
        500);
    }

    onMounted(() => {
        $(window).scroll(function() {
            if ($(window).scrollTop() > 50) {
                $(".bt-box.top").fadeIn(200);
            }else {
                $(".bt-box.top").fadeOut(200);
            }
        });
    });

</script>
<template>
    <div class="backtop">
        <div class="bt-box top" @click="backTop" title="返回顶部" style="display: none">
            <el-icon><ArrowUpBold /></el-icon>
        </div>
        <div class="bt-box sun" @click="themeStore.changeTheme(themeStore.themeFlag = !themeStore.themeFlag)">
            <svg-icon :href="'#icon-' + (themeStore.themeFlag ? 'sun': 'moon')" width="18px" height="18px" fill="#FFFFFF"></svg-icon>
        </div>
        <div class="bt-box bottom"  @click="backBottom" title="网站底部">
            <el-icon><ArrowDownBold /></el-icon>
        </div>
    </div>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />